<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
		<shopro-empty v-if="!hasTemplate" :image="$IMG_URL + '/imgs/empty/template_empty.png'" tipText="暂未找到模板，请前往装修~">
		</shopro-empty>

		<view v-else-if="isConnected && isRefresh" class="content-box">
			<view class="template-box">
				<view class="page-top">
					<view class="statistics-data">
						<view class="statistics-data-list">
							<view class="statistics-data-item">
								<text>总收入</text>
								<text>{{ amount }}</text>
							</view>
							<view class="statistics-data-item">
								<text>核销</text>
								<text>{{ daijin_money }}</text>
							</view>
							<view class="statistics-data-item">
								<text>实收现金</text>
								<text>{{ cash_money }}</text>
							</view>
						</view>
						<view class="statistics-data-list">
							<view class="statistics-data-item">
								<text>发放优惠券</text>
								<text>{{ youhui_money }}</text>
							</view>
							<view class="statistics-data-item" @click="jrsr()">
								<text>今日收入</text>
								<text>{{ today_income }}</text>
							</view>
							<view class="statistics-data-item">
								<text>我的余额</text>
								<text>{{ user_money }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- nav -->
				<view class="nav-box">
					<view class="nav-item" @click="goMerchant()">
						<image class="nav-img" src="@/static/images/icons/nav_1.png"></image>
						<text>门店管理</text>
					</view>
					<view class="nav-item" @click="goDianpu()">
						<image class="nav-img" src="@/static/images/icons/nav_2.png"></image>
						<text>店铺订单</text>
					</view>
					<view class="nav-item" @click="goYhj()">
						<image class="nav-img" src="@/static/images/icons/nav_3.png"></image>
						<text>店铺米包</text>
					</view>
					<view class="nav-item" @click="goBb()">
						<image class="nav-img" src="@/static/images/icons/nav_4.png"></image>
						<text>报表查询</text>
					</view>
					<view class="nav-item" @click="goYh()">
						<image class="nav-img" src="@/static/images/icons/nav_5.png"></image>
						<text>用户总汇</text>
					</view>
				</view>
				<!-- 数据分析 -->
				<view class="notice">
					<view class="notice-title">
						数据分析
					</view>
					<view class="analysis-box">
						<view class="tab-box">
							<u-tabs :list="tabList" :current="current" item-width="50%" inactive-color="#666666"
								active-color="#e9c83ce8" font-size="28" :active-item-style="activetemStyle"
								@change="changeTab"></u-tabs>
						</view>
						<view class="tiem-box">
							<view class="time-text">
								<!-- · 更新时间 06-25 -->
							</view>
							<view class="times">
								<view class="time-item" v-for="(item,index) in times" :key="index"
									:class="{'activeCss':activeVar==index}" @click="changtime(index)">
									{{item}}
								</view>
							</view>
						</view>

						<view class="charts-box" v-if="dataInfo">
							<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
						</view>
						<view class="nodata" v-else>
							暂无数据
						</view>

					</view>
				</view>
				<!-- 公告 -->
				<!-- <view class="notice">
					<view class="notice-title">
						公告
					</view>
					<view class="notice-list">
						<view class="notice-list-item u-flex u-row-between" v-for="(item,index) in notice ">
							<view>
								<text class="item-icon">·</text>
								<text>{{ item.title }}</text>
							</view>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
				</view> -->
			</view>

			<!-- 分类选项卡 -->
			<!-- 	<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable"
				:styleType="categoryTabsData.style"
				:tabsList="categoryTabsData.category_arr"
			></sh-category-tabs> -->
			<!-- 登录提示 -->
			<!--			<shopro-auth-modal></shopro-auth-modal>-->
			<!-- 悬浮按钮 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 连续弹窗提醒 -->
			<!-- <shopro-notice-modal v-if="!showPrivacy && isLogin"></shopro-notice-modal> -->
			<!-- 隐私协议 -->
			<!-- #ifdef APP-PLUS -->
			<privacy-modal v-if="initShop && initShop.name" v-model="showPrivacy"></privacy-modal>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
			<!-- #endif -->
		</view>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	// import shSeckill from './components/sh-seckill.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';

	import privacyModal from './index/privacy-modal.vue';
	import homeHead from './index/home-head.vue';

	// #ifdef MP-WEIXIN
	import {
		HAS_LIVE
	} from '@/env';
	import shLive from './components/sh-live.vue';
	// #endif

	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			shBanner,
			shGridSwiper,
			shGroupon,
			shHotGoods,
			shAdv,
			shCoupon,
			// shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,

			privacyModal,
			homeHead,

			// #ifdef MP-WEIXIN
			shLive
			// #endif
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,

				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				today_income: '', //进入收入
				caigou_money: '', //采购进
				user_money: '', //我的余额
				amount: '',
				youhui_money: '',
				daijin_money: '',
				cash_money: '',
				notice: [], //公告列表
				id: '',
				tabList: [{
					name: '订单',
				}, {
					name: '收入',
				}],
				times: ["日", "周", "月"],
				current: 0,
				activeVar: 0,
				activetemStyle: {
					color: "#ffffff"
				},
				dataInfo: null,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#FFB3B3", "#B7DDFF"],
					padding: [15, 0, 0, 0],
					legend: {},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						tooltip: {

						},
						area: {
							type: "straight",
							bgColor: "#fff",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						}
					}
				}
			};
		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
			this.getinitdata();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
			// let that = this;
			this.enable = true;
			this.isLogin && this.init();
			this.getinitdata();
			this.getData();
			// // 网络变化检测
			// uni.onNetworkStatusChange(res => {
			// 	this.isConnected = res.isConnected;
			// 	res.isConnected && this.init();
			// 	this.getinitdata();
			// 	this.getData();
			// });
			uni.showTabBar()
		},
		onHide() {
			this.enable = false;
		},
		onLoad(option) {
			// console.log("首页啊：",option)
			if (option) {
				this.id = option.id;
			}
			// #ifdef APP-VUE
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
			this.getinitdata();
			this.getData();
		},
		methods: {
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
			// 获取数据
			getData() {
				let that = this;
				let params = {
					show_type: that.current + 1,
					date_type: that.activeVar + 1,
					store_shop_id: that.id
				};
				that.$http_business('store.chartData', params).then(res => {
					if (res.code === 1) {
						that.dataInfo = res.data;
						that.getServerData();
					}
				});
			},
			changeTab(index) {
				this.current = index;
				this.getData();
			},
			changtime(val) {
				this.activeVar = val;
				this.getData();
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				var that = this;
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: that.dataInfo.categories,
						series: that.dataInfo.series
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getinitdata() {
				const that = this
				that.$http_business(
					'common.shangjia_template', {
						token: uni.getStorageSync("token")
					},
				).then(res => {
					if (res.code === 1) {
						this.today_income = res.data.today_income; //进入收入
						this.caigou_money = res.data.caigou_money; //采购进
						this.user_money = res.data.user_money; //我的余额
						this.notice = res.data.notice; //公告列表
						this.amount = res.data.amount;
						this.youhui_money = res.data.youhui_money;
						this.daijin_money = res.data.daijin_money;
						this.cash_money = res.data.cash_money;
					} else {
						that.$u.toast(res.msg);
					}
				});
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			goMerchant() {
				this.jump('/pages/app/merchant/list');
			},
			goDianpu() {
				this.jump('/pages/mendian/dianpu');
			},
			goYhj() {
				this.jump('/pages/youhui/youhui');
			},
			goBb() {
				this.jump('/pages/message/baobiao');
			},
			goYh() {
				this.jump('/pages/today/huizong');
			},
			jrsr() {
				this.jump('/pages/today/today');
			}
		}
	};
</script>

<style lang="scss">
	.page-top {
		height: calc(var(--status-bar-height) + 450rpx);
		// background: #4f83fd;
		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.0500);
		padding-top: 50rpx;

		.statistics-data {
			height: 306rpx;
			margin: 0 30rpx;
			// background: linear-gradient(360deg, rgba(255, 255, 255, 0.9100) 0%, rgba(255, 255, 255, 0.9400) 38%, #FFFFFF 100%);
			box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.0500);
			border-radius: 5px;
            background-color: #13114c;
			.bg-icon {
				position: absolute;
				top: 10%;
				right: 0;
				width: 236rpx;
				height: 210rpx;
				z-index: -1;
			}

			.statistics-data-list {
				display: flex;
				align-items: center;
			}

			.statistics-data-item {
				margin-top: 44rpx;
				width: 33%;
				text-align: center;
				display: flex;
				flex-direction: column;
			}

			.statistics-data-item text:first-child {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #ffffff;
				line-height: 34rpx;
				text-shadow: 0px 4rpx 20rpx rgba(0, 0, 0, 0.0500);
			}

			.statistics-data-item text:last-child {
				height: 50rpx;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 50rpx;
				text-shadow: 0px 4rpx 20rpx rgba(0, 0, 0, 0.0500);
				margin-top: 4rpx;
			}
		}

	}

	.nav-box {
		z-index: 2;
		margin-top: -60rpx;
		display: flex;
		align-items: center;
		height: 196rpx;
		// background-image: url(../../static/images/icons/nav-bg.png);
		// background-repeat: no-repeat;
		// background-size: cover;
        background-color: #13114c;
		.nav-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			text-align: center;

			.nav-img {
				width: 48rpx;
				height: 48rpx;
				margin: 44rpx auto 18rpx auto;
			}
		}

	}

	.analysis-box {
		min-height: 200rpx;
	}

	.notice {
		margin-top: 24rpx;
		background-color: #13114c;
		padding: 0 40rpx 40rpx 40rpx;

		.notice-title {
			padding: 34rpx 0 30rpx 0;
			font-size: 30rpx;
			font-weight: 600;
			color: #ffffff;
			border-bottom: 2rpx solid #E7E7E7;
			margin-bottom: 4rpx;

		}

		.notice-list-item {
			margin-top: 24rpx;

			.item-icon {
				margin-right: 10rpx;
			}

			.u-icon {
				margin-left: auto;
			}
		}
	}

	.charts-box {
		width: 100%;
		height: 274px;
		margin-top: 30rpx;
	}

	.nodata {
		text-align: center;
		padding: 40px 0;
	}

	.tab-box {
		margin-bottom: 30rpx;
	}

	.tiem-box {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.time-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.times {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.time-item {
		height: 44rpx;
		width: 88rpx;
		text-align: center;
		line-height: 44rpx;
		border-radius: 220rpx;
		border: 1px solid #DEDEDE;
		margin-left: 16rpx;
	}

	.activeCss {
		height: 44rpx;
		width: 88rpx;
		text-align: center;
		line-height: 44rpx;
		border-radius: 220rpx;
		border: 1px solid rgba(233,200,60, 0.3);
		margin-left: 16rpx;
		color: #e9c83ce8;
	}
</style>